<template>
	<view class="contents">
		<view class="tabs">
			<u-tabs :scrollable="false" :list="list" @click="on_tab"></u-tabs>
		</view>
		<view class="inputValueBox" style="margin-top: 20rpx;">
			<u--input focus v-model="valueData" customStyle="background: #fff;" @confirm="on_confirm(1)" shape="circle"
				border="true" :adjustPosition="false" fontSize="14px" placeholder="用户ID/手机号/订单号/店铺名称"
				prefixIcon="search" prefixIconStyle="font-size: 22px;color: #0000000;font-weight: 700;" />
		</view>
		<view v-if="dataList.length">
			<view class="ul" v-for="item in dataList" :key="item.id">
				<div class="li">
					<div class="name">商品名称：</div>
					<div class="contentValue">{{ item.goods_name }}</div>
				</div>
				<div class="li">
					<div class="name">商品规格：</div>
					<div class="contentValue">{{ item.sku_name }}</div>
				</div>
				<div class="li">
					<div class="name">商品单价：</div>
					<div class="contentValue">￥{{ item.goods_price }}</div>
				</div>
				<div class="li">
					<div class="name">下单用户名称：</div>
					<div class="contentValue">{{ item.user_name }}</div>
				</div>
				<div class="li">
					<div class="name">下单手机号：</div>
					<div class="contentValue">{{ item.mobile }}</div>
				</div>
				<div class="li">
					<div class="name">店铺名称：</div>
					<div class="contentValue">{{ item.shop_name }}</div>
				</div>
				<div class="li">
					<div class="name">订单状态：</div>
					<div class="contentValue">{{
						item.order_status == 0 ? '待付款' : item.order_status == 1 ? '待取货' : item.order_status
							== 2
							? "已取货" : item.order_status == 4 ? '已退款' : item.order_status == 5 ? '售后' : ''
					}}</div>
				</div>
				<div class="li">
					<div class="name">支付方式：</div>
					<div class="contentValue">
						{{
							item.pay_way == 1 ? '微信支付' : item.pay_way == 2 ? '余额支付' : item.pay_way == 3
								? '组合支付'
								: ''
						}}
					</div>
				</div>
				<div class="li" v-if="item.pay_status == 2">
					<div class="name">支付时间：</div>
					<div class="contentValue">{{ item.pay_time }}</div>
				</div>
				<div class="li">
					<div class="name">退款状态：</div>
					<div class="contentValue">{{ item.refund_status == 0 ? '未退款' : item.refund_status == 1 ? '部分退款' :
						item.refund_status == 2
							? '全部退款'
							: ''
					}}</div>
				</div>
				<div class="li" v-if="item.refund_reason">
					<div class="name">退款原因：</div>
					<div class="contentValue">{{ item.refund_reason }}</div>
				</div>
				<div class="li" v-if="item.refund_status > 0">
					<div class="name">退款金额：</div>
					<div class="contentValue">￥{{ item.refund_amount }}</div>
				</div>
				<div class="li" v-if="item.refund_time > 0 && item.refund_time">
					<div class="name">退款时间：</div>
					<div class="contentValue">{{ item.refund_time }}</div>
				</div>
				<div class="li liTwo">
					<div class="name">总订单编号：</div>
					<div class="contentValue">{{ item.order_sn }}<view class="duplicate"
							@click="copyOrderId(item.order_sn)">复制</view>
					</div>
				</div>
				<div class="li liTwo">
					<div class="name">子订单编号：</div>
					<div class="contentValue">{{ item.sub_order_sn }}<view class="duplicate"
							@click="copyOrderId(item.sub_order_sn)">复制</view>
					</div>
				</div>

				<div class="li liTwo" v-if="item.verification_status == 1">
					<div class="name">核销时间：</div>
					<div class="contentValue">{{ item.verification_time }}
					</div>
				</div>

				<view class="btnBox liTwo">
					<view class="btn" v-if="(item.pay_status == 1 && item.refund_status != 2)">
						<u-button @click="on_operate(item)" type="error" text="退款"></u-button>
					</view>
				</view>

				<view class="btnBox liTwo">
					<view class="btn" v-if="(item.verification_status == 0)">
						<u-button @click="on_writeOff(item)" type="primary" text="核销"></u-button>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="order" text="暂无订单" icon="http://cdn.uviewui.com/uview/empty/order.png">
			</u-empty>
		</view>
		<view class="pagination" v-if="total">
			<uni-pagination @change="on_change" :total="total"></uni-pagination>
			<view class="example">
				<text class="example-info">当前页：{{ page }}，数据总量：{{ total }}条，每页数据：{{ 10 }}</text>
			</view>
		</view>
		<u-modal @confirm="on_defineOperation()" @cancel="showType = false" :showCancelButton="true" :show="showType"
			title="退款">
			<view class="slot-content">
				<view style="color:red;font-size:12px">注意：组合支付全部退回余额，当前{{ form.pay_way == 1 ? '微信支付' : form.pay_way == 2
					?
					'余额支付'
					:
					form.pay_way == 3 ? '组合支付' : '' }}
				</view>
				<view class="selectBox">
					<view class="name">退款方式：</view>
					<view class="select">
						<u-radio-group v-model="form.type" placement="row">
							<u-radio class="radio" v-for="(item, index) in radiolist" :key="index" :label="item.name"
								:name="item.name" @change="radioChange">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="selectBox" v-if="form.type == '取消订单'">
					<view class="name">是否退还积分：</view>
					<view class="select">
						<u-radio-group v-model="form.is_refund" placement="row">
							<u-radio class="radio" v-for="(item, index) in radiolistTwo" :key="index" :label="item.name"
								:name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="selectBox" v-if="form.type == '售后理赔'">
					<view class="name">退款金额：</view>
					<view class="select">
						<u--input placeholder="请输入退款金额" border="surround" v-model="form.money"></u--input>
					</view>
				</view>
			</view>
		</u-modal>
		<u-loading-page loading-color="#1890ff" color="#fff" bg-color="rgba(0, 0, 0, 0.5)"
			:loading="loadingType"></u-loading-page>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loadingType: false,
			tabIndex: 0,
			valueData: '',
			list: [
				{
					name: '线上自提',
					take_type: 1
				},
				{
					name: '线下下单',
					take_type: 2
				},

			],
			radiolistTwo: [{
				name: '是'
			},
			{
				name: '否'
			}
			],
			radiolist: [{
				name: '售后理赔'
			},
			{
				name: '取消订单'
			}

			],
			form: {
				money: '',
				type: '取消订单',
				is_refund: '是',
			},
			dataList: [],
			page: 1,
			total: 0,
			take_type: 1,
			orderId: '',
			showType: false,
			showBtn: true
		}
	},
	mixins: [],
	onShow() {
		this.getOrderList()
	},
	created() {
	},
	//下拉刷新
	onPullDownRefresh() {

	},
	onLoad(options) {

	},
	methods: {
		on_defineOperation() {
			if (!this.showBtn) {
				return false;
			}
			this.showBtn = false;
			if (this.form.type == '取消订单') {
				uni.showLoading({
					title: '加载中···',
					mask: true
				})
				this.$request.request({
					url: 'shop/orderRefund',
					method: 'POST',
					data: {
						sub_order_sn: this.form.sub_order_sn,
						money: this.form.money,
						type: this.form.type == '取消订单' ? '1' : '2',
						is_refund: this.form.is_refund == '是' ? '1' : '2',
						refund_reason_type: "快递管控取消订单", //退款理由类型 写死
						refund_reason: "取消订单" //退款理由 写死
					}
				}).then(res => {
					this.showType = false;
					this.getOrderList()
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					uni.hideLoading()
					setTimeout(() => {
						this.showBtn = true;
					}, 3000)
				}).finally(() => {

				})
			} else if (this.form.type == '售后理赔') {
				if (!this.form.money) {
					uni.showToast({
						title: '请输入退款金额',
						icon: 'none'
					})
				} else {
					uni.showLoading({
						title: '加载中···',
						mask: true
					})
					this.$request.request({
						url: 'shop/orderRefund',
						method: 'POST',
						data: {
							sub_order_sn: this.form.sub_order_sn,
							money: this.form.money,
							type: this.form.type == '取消订单' ? '1' : '2',
							is_refund: this.form.is_refund == '是' ? '1' : '2',
							refund_reason_type: "快递管控取消订单", //退款理由类型 写死
							refund_reason: "售后理赔" //退款理由 写死
						}
					}).then(res => {
						this.showType = false;
						this.getOrderList()
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						uni.hideLoading()
						setTimeout(() => {
							this.showBtn = true;
						}, 3000)
					}).finally(() => {

					})
				}
			}
		},
		radioChange(e) {
			console.log(e)
		},
		on_operate(item) {
			this.orderId = item.id
			this.form.money = '';
			this.form.type = '售后理赔';
			this.form.sub_order_sn = item.sub_order_sn;
			this.form.pay_way = item.pay_way;
			this.form.money_pay_num = item.money_pay_num;
			this.form.wx_pay_num = item.wx_pay_num;
			this.showType = true
		},
		on_writeOff(item) {
			uni.showModal({
				title: '核销确认',
				content: '是否确认确认核销?',
				success: (res) => {
					if (res.confirm) {
						// 用户点击确定
						this.$request.request({
							url: 'shop/shopOrderVerification',
							method: 'post',
							data: {
								sub_order_sn: item.sub_order_sn
							}
						}).then(res => {
							uni.showToast({ title: '操作成功', icon: 'none' })
							this.getOrderList()
						}).finally(() => {
						})
					} else {

					}
				}
			});
		},
		//复制订单号
		copyOrderId(oid) {
			var that = this;
			uni.setClipboardData({
				data: oid,
				success: function () {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				}
			});
		},
		// 订单列表
		getOrderList() {
			this.loadingType = true;
			this.$request.request({
				url: 'mobile/shopOrderList',
				method: 'POST',
				data: {
					page: this.page,
					value: this.valueData,
					take_type: this.take_type
				}
			}).then(res => {
				this.dataList = res.data.list.data
				this.total = res.data.list.total
			}).finally(() => {
				this.loadingType = false;
			})
		},
		//搜索
		on_confirm() {
			this.getOrderList()
		},
		//分页
		on_change(page) {
			this.page = page.current;
			this.getOrderList()
		},
		//切换
		on_tab(e) {
			console.log(e);
			this.take_type = e.take_type;
			this.tabIndex = e.index;
			this.getOrderList();
		},
	}
}
</script>

<style lang="scss">
.contents {
	width: 100%;
	min-height: 100vh;
	background-color: #f0f0f0;
	padding: 20rpx;

	.slot-content {
		width: 100% !important;

		.selectBox {
			font-size: 14px;
			margin-top: 30rpx;

			.name {
				white-space: normal nowrap;
				margin-bottom: 20rpx;
			}

			.select {
				flex: 1;

				.radio:nth-child(1) {
					margin-left: 0;
				}

				.radio {
					margin-left: 40rpx;
				}
			}
		}
	}

	.ul:nth-last-child(1) {
		border-bottom: none;
	}

	.block {
		margin-top: 15rpx;
		width: 100%;
		font-size: 14px;
		padding: 20rpx;
		padding-bottom: 20rpx;
		border: 1px solid #ccc;

		.title {
			font-size: 15px;
			font-weight: 700;
		}

		.li {
			margin-top: 20rpx;
			width: 50%;
		}
	}

	.ul {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		font-size: 14px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 20rpx;

		.li {
			margin-top: 20rpx;
			width: 50%;

			.img {
				width: 100rpx;
				height: 100rpx;
			}

			.contentValue {
				margin-top: 6rpx;

				.duplicate {
					color: #999999;
					font-size: 22rpx;
					border: 2rpx solid #999999;
					border-radius: 8rpx;
					padding: 2rpx 8rpx;
					margin-left: 20rpx;
					float: right;
				}
			}
		}

		.liTwo {
			width: 100% !important;
		}

		.btnBox {
			display: flex;
			margin-top: 20rpx;
			max-width: 100%;
			flex-wrap: wrap;
			justify-content: space-between;

			.btn {
				// margin-top: 20rpx;
				margin: 10rpx;
				min-width: 30%;
			}
		}
	}
}
</style>